<template>
    <div class="product-edit">
        <el-form :model="form" :rules="rules" size="small" ref="form" label-width="136px" class="demo-form" :disabled="routeName === 'productView'">
            <el-form-item label="产品名称" prop="productName">
                <el-input v-model="form.productName" style="width: 496px;" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="产品编号" prop="productSeq">
                <el-input v-model="form.productSeq" style="width: 496px;" placeholder="请输入产品编号"></el-input>
            </el-form-item>
            <el-form-item label="发行单位" prop="issuerName">
                <el-input v-model="form.issuerName" style="width: 180px;" placeholder="请输入发行机构名称"></el-input>
                <span class="line"></span>
                <el-input v-model="form.issuerAccountName" style="width: 180px;" placeholder="请输入发行机构账号户名"></el-input>
                <span class="line"></span>
                <el-input v-model="form.issuerAccountSeq" style="width: 180px;" placeholder="请输入发行机构账号账号"></el-input>
                <span class="line"></span>
                <el-input v-model="form.issuerAccountBank" style="width: 180px;" placeholder="请输入发行机构账号开户行"></el-input>
            </el-form-item>
            <el-form-item label="产品风险等级" prop="productRiskLevel">
                <el-radio-group v-model="form.productRiskLevel">
                    <el-radio v-for="(item, index) in ProductRiskLevelRidio" :key="index" :label="item.id">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="产品单价" prop="productUnitPrice" class="form-price">
                <el-input v-model="form.productUnitPrice" style="width: 350px;" placeholder="请输入产品单价">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="最高募集金额" prop="maxAmountRaised" class="form-price">
                <el-input v-model="form.maxAmountRaised" class="el-input-normal" placeholder="请输入最高募集金额">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="个人递增金额" prop="individualIncrement" class="form-price">
                <el-input v-model="form.individualIncrement" class="el-input-normal" placeholder="请输入个人递增金额">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="个人上限金额" prop="maximumAmount" class="form-price">
                <el-input v-model="form.maximumAmount" class="el-input-normal" placeholder="请输入个人上限金额">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="冻结金额" prop="frozenAmount" class="form-price">
                <el-input v-model="form.frozenAmount" class="el-input-normal" placeholder="请输入冻结金额">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="募集日期" prop="raiseDate" class="form-date">
                <el-date-picker
                    class="el-input-normal"
                    v-model="form.raiseDate"
                    type="daterange"
                    :unlink-panels="true"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="产品期限" prop="productTerm" class="form-price">
                <el-input v-model.number="form.productTerm" class="el-input-normal" placeholder="产品期限">
                    <template #append>天</template>
                </el-input>
            </el-form-item>
            <el-form-item label="起息日期" class="form-date" prop="interestStartDate">
                <el-date-picker class="el-input-normal" type="date" value-format="yyyy-MM-dd" placeholder="请选择起息日期" v-model="form.interestStartDate"></el-date-picker>
                <!--                <span style="margin-left: 20px;"><i class="el-icon-warning-outline"></i>起息日期应晚于募集结束日期。</span>-->
            </el-form-item>
            <el-form-item label="到期日期" class="form-date" prop="expireDate">
                <el-date-picker class="el-input-normal" type="date" value-format="yyyy-MM-dd" placeholder="请选择到期日期" v-model="form.expireDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="业绩比较基准" :required="false">
                <div class="performance-grade">
                    <span class="grade-title">一档</span>
                    <el-form-item label="认购金额" prop="performanceBenchmarkAmount1" label-width="80px">
                        <el-input v-model="form.performanceBenchmarkAmount1" placeholder="请输入认购金额">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益率" prop="performanceBenchmarkYield1" label-width="80px">
                        <el-input v-model="form.performanceBenchmarkYield1" placeholder="请输入收益率">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="performance-grade">
                    <span class="grade-title">二档</span>
                    <el-form-item label="认购金额" prop="performanceBenchmarkAmount2" label-width="80px">
                        <el-input v-model="form.performanceBenchmarkAmount2" placeholder="请输入认购金额">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益率" prop="performanceBenchmarkYield2" label-width="80px">
                        <el-input v-model="form.performanceBenchmarkYield2" placeholder="请输入收益率">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="performance-grade">
                    <span class="grade-title">三档</span>
                    <el-form-item label="认购金额" prop="performanceBenchmarkAmount3" label-width="80px">
                        <el-input v-model="form.performanceBenchmarkAmount3" placeholder="请输入认购金额">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益率" prop="performanceBenchmarkYield3" label-width="80px">
                        <el-input v-model="form.performanceBenchmarkYield3" placeholder="请输入收益率">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item label="代销手续费率" :required="false">
                <div class="performance-grade">
                    <span class="grade-title">一档</span>
                    <el-form-item label="认购金额" prop="commissionRateAmount1" label-width="80px">
                        <el-input v-model="form.commissionRateAmount1" placeholder="请输入认购金额">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益率" prop="commissionRateYield1" label-width="80px">
                        <el-input v-model="form.commissionRateYield1" placeholder="请输入收益率">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="performance-grade">
                    <span class="grade-title">二档</span>
                    <el-form-item label="认购金额" prop="commissionRateAmount2" label-width="80px">
                        <el-input v-model="form.commissionRateAmount2" placeholder="请输入认购金额">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益率" prop="commissionRateYield2" label-width="80px">
                        <el-input v-model="form.commissionRateYield2" placeholder="请输入收益率">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="performance-grade">
                    <span class="grade-title">三档</span>
                    <el-form-item label="认购金额" prop="commissionRateAmount3" label-width="80px">
                        <el-input v-model="form.commissionRateAmount3" placeholder="请输入认购金额">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益率" prop="commissionRateYield3" label-width="80px">
                        <el-input v-model="form.commissionRateYield3" placeholder="请输入收益率">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item label="适用客户风险等级" prop="customerRiskLevel">
                <el-radio-group v-model="form.customerRiskLevel">
                    <el-radio v-for="(item, index) in ProductRiskLevelRidio" :key="index" :label="item.id">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="销售对象" prop="salesObject">
                <el-radio-group v-model="form.salesObject">
                    <el-radio v-for="(item, index) in targetCustomerRidio" :key="index" :label="item.id">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="退出标志" prop="exitSign">
            </el-form-item>
            <el-form-item label="产品状态" prop="productStatus">
            </el-form-item>
            <el-form-item label="实收代理费" class="agencyFee" prop="paidFee">
                <div class="agencyFee-item">
                    <span class="agencyFee-label">付款方账户信息</span>
                    <el-input v-model="form.payAccountName" style="width: 180px;" placeholder="请输入付款方账号户名"></el-input>
                    <span class="line"></span>
                    <el-input v-model="form.payAccountNo" style="width: 180px;" placeholder="请输入付款方账号"></el-input>
                    <span class="line"></span>
                    <el-input v-model="form.payAccountBank" style="width: 230px;" placeholder="请输入付款方账号开户行"></el-input>
                </div>
                <div class="agencyFee-item">
                    <span class="agencyFee-label">我行中收专户信息</span>
                    <el-input v-model="form.ownAccountName" style="width: 180px;" placeholder="请输入我行专收账户户名"></el-input>
                    <span class="line"></span>
                    <el-input v-model="form.ownAccountNo" style="width: 180px;" placeholder="请输入我行专收账户"></el-input>
                    <span class="line"></span>
                    <el-input v-model="form.ownAccountBank" style="width: 230px;" placeholder="请输入我行专收账户开户行"></el-input>
                </div>
                <div class="agencyFee-item form-price">
                    <span class="agencyFee-label">实收金额</span>
                    <el-input v-model="form.paidFee" style="width: 180px;" placeholder="请输入实收金额">
                        <template #append>元</template>
                    </el-input>
                </div>
                <div class="agencyFee-item form-date">
                    <span class="agencyFee-label">到账日期</span>
                    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择到账日期" v-model="form.payDate"></el-date-picker>
                </div>
                <div class="agencyFee-item form-date time-pic">
                    <span class="agencyFee-label">对应收费时间段</span>
                    <el-time-picker
                        is-range
                        v-model="form.payTime"
                        value-format="HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                    ></el-time-picker>
                </div>
                <div class="agencyFee-item agencyFee-notes">
                    <span class="agencyFee-label">备注</span>
                    <el-input
                        type="textarea"
                        style="width: 747px"
                        :rows="5"
                        maxlength="300"
                        show-word-limit
                        v-model="form.note"
                    ></el-input>
                </div>
            </el-form-item>
            <el-form-item label="产品类型" prop="productType">
                <el-radio-group v-model="form.productType">
                    <el-radio v-for="(item, index) in productTypeRidio" :key="index" :label="item.id">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="form-btn">
            <el-button type="primary" size="small" @click="submit" v-if="routeName === 'productAdd' || routeName === 'productEdit'">保存并提交审核</el-button>
            <el-button type="warning" size="small" @click="saveDraft" v-if="routeName === 'productAdd'">保存草稿</el-button>
            <template v-if="routeName === 'productAuth'">
                <el-button type="primary" size="small" @click="submit">通过审核</el-button>
                <el-button type="warning" size="small" @click="saveDraft">退回修改</el-button>
            </template>
            <el-button size="small" @click="goBack">返回</el-button>
        </div>
    </div>
</template>

<script>
import {updateProduct, getProduct} from '@/api/product';
import {regexp} from '@/common/utils/tool';

export default {
    name: 'productForm',
    props: {
        id: {
            type: String,
            default: '',
        },
    },
    data() {
        // 发行单位
        const validIssuer = (rule, value, callback) => {
            if (this.$isEmpty(this.form.issuerName) ||
                this.$isEmpty(this.form.issuerAccountName) ||
                this.$isEmpty(this.form.issuerAccountSeq) ||
                this.$isEmpty(this.form.issuerAccountBank)
            ) {
                return callback(new Error('请输入完整的发行单位'));
            }
            callback();
        };
        // 金额
        const validMoney = (rule, value, callback) => {
            if (value && !regexp.money.test(value)) {
                return callback(new Error('必须大于0且最多两位小数'));
            }
            callback();
        };
        // 自然数
        const validNature = (rule, value, callback) => {
            if (value && !/^[0-9]\d*$/.test(value)) {
                return callback(new Error('必须为大于0的整数'));
            }
            callback();
        };
        // 起息日期
        const validInterestStartDate = (rule, value, callback) => {
            if (value && this.form.raiseDate.length > 1 && new Date(value) <= new Date(this.form.raiseDate[1])) {
                return callback(new Error('起息日期应晚于募集结束日期'));
            }
            callback();
        };
        // 实收代理费
        const validPaidFee = (rule, value, callback) => {
            if (this.$isEmpty(this.form.payAccountName) ||
                this.$isEmpty(this.form.payAccountBank) ||
                this.$isEmpty(this.form.payAccountNo) ||
                this.$isEmpty(this.form.ownAccountName) ||
                this.$isEmpty(this.form.ownAccountBank) ||
                this.$isEmpty(this.form.ownAccountNo) ||
                this.$isEmpty(this.form.paidFee) ||
                this.$isEmpty(this.form.payDate) ||
                this.$isEmpty(this.form.payTime)
            ) {
                return callback(new Error('请输入完整的实收代理费'));
            }
            if (!regexp.money.test(this.form.paidFee)) {
                return callback(new Error('实收金额必须大于0且最多两位小数'));
            }
            callback();
        };
        return {
            form: {
                productName: '',
                productSeq: '',
                issuerName: '',
                issuerAccountName: '',
                issuerAccountSeq: '',
                issuerAccountBank: '',
                productRiskLevel: '',
                productUnitPrice: '',
                maxAmountRaised: '',
                individualIncrement: '',
                maximumAmount: '',
                frozenAmount: '',
                raiseDate: [],
                productTerm: '',
                interestStartDate: '',
                expireDate: '',
                performanceBenchmarkAmount1: '',
                performanceBenchmarkAmount2: '',
                performanceBenchmarkAmount3: '',
                performanceBenchmarkYield1: '',
                performanceBenchmarkYield2: '',
                performanceBenchmarkYield3: '',
                commissionRateAmount1: '',
                commissionRateAmount2: '',
                commissionRateAmount3: '',
                commissionRateYield1: '',
                commissionRateYield2: '',
                commissionRateYield3: '',
                customerRiskLevel: '',
                salesObject: '',
                exitSign: '',
                productStatus: '',
                payAccountName: '',
                payAccountBank: '',
                payAccountNo: '',
                ownAccountName: '',
                ownAccountBank: '',
                ownAccountNo: '',
                paidFee: '',
                payDate: '',
                payTime: [new Date(2020, 1, 1, 0, 0), new Date(2020, 1, 1, 23, 59)],
                note: '',
                productType: '',
            },
            rules: {
                productName: [
                    {required: true, message: '请输入产品名称', trigger: 'blur'},
                ],
                /*productSeq: [
                    {required: true, message: '请输入产品编号', trigger: 'blur'},
                ],
                issuerName: [
                    {required: true, message: '请输入完整的发行单位', trigger: 'blur'},
                    {validator: validIssuer, trigger: 'blur'},
                ],
                productRiskLevel: [
                    {required: true, message: '请选择产品风险等级', trigger: 'blur'},
                ],
                productUnitPrice: [
                    {required: true, message: '请输入产品单价', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                maxAmountRaised: [
                    {required: true, message: '请输入最高募集金额', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                individualIncrement: [
                    {required: true, message: '请输入个人递增金额', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                maximumAmount: [
                    {required: true, message: '请输入个人上限金额', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                frozenAmount: [
                    {required: true, message: '请输入冻结金额', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                raiseDate: [
                    {required: true, message: '请选择募集日期', trigger: 'blur'},
                ],
                productTerm: [
                    {required: true, message: '请输入产品期限', trigger: 'blur'},
                    {validator: validNature, trigger: 'blur'},
                ],
                interestStartDate: [
                    {required: true, message: '请选择起息日期', trigger: 'blur'},
                    {validator: validInterestStartDate, trigger: 'blur'},
                ],
                expireDate: [
                    {required: true, message: '请选择到期日期', trigger: 'blur'},
                ],
                performanceBenchmarkAmount1: [
                    {required: true, message: '请输入一档认购金额', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                performanceBenchmarkAmount2: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                performanceBenchmarkAmount3: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                performanceBenchmarkYield1: [
                    {required: true, message: '请输入一档收益率', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                performanceBenchmarkYield2: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                performanceBenchmarkYield3: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                commissionRateAmount1: [
                    {required: true, message: '请输入一档认购金额', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                commissionRateAmount2: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                commissionRateAmount3: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                commissionRateYield1: [
                    {required: true, message: '请输入一档收益率', trigger: 'blur'},
                    {validator: validMoney, trigger: 'blur'},
                ],
                commissionRateYield2: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                commissionRateYield3: [
                    {validator: validMoney, trigger: 'blur'},
                ],
                customerRiskLevel: [
                    {required: true, message: '请选择适用客户风险等级', trigger: 'blur'},
                ],
                salesObject: [
                    {required: true, message: '请选择销售对象', trigger: 'blur'},
                ],
                paidFee: [
                    {required: true, message: '请输入完整的实收代理费信息', trigger: 'blur'},
                    {validator: validPaidFee, trigger: 'blur'},
                ],
                productType: [
                    {required: true, message: '请选择产品类型', trigger: 'blur'},
                ],*/
            },
            ProductRiskLevelRidio: [
                {label: 'R1（谨慎型）', id: 'R1'},
                {label: 'R2（稳健型）', id: 'R2'},
                {label: 'R3（平衡型）', id: 'R3'},
                {label: 'R4（进取型）', id: 'R4'},
                {label: 'R5（激进型）', id: 'R5'},
            ],
            targetCustomerRidio: [
                {label: '自然人', id: '1', disabled: false},
                {label: '法人机构', id: '2', disabled: true},
            ],
            productTypeRidio: [
                {label: '净值型', id: '1'},
                {label: '非净值型', id: '2'},
            ],
            btnDisabled: false,
        };
    },
    computed: {
        routeName() {
            return this.$route.name;
        },
    },
    created() {
        if (this.id) {
            this.getProduct();
        }
    },
    methods: {
        getProduct() {
            getProduct({
                id: this.id,
            }).then(({data}) => {
                this.form = data;
                const {raiseStartDate, raiseEndDate, payStartDate, payEndDate, payDate} = data;
                this.form.raiseDate = [raiseStartDate, raiseEndDate];
                this.form.payTime = [`${payDate} ${payStartDate}`, `${payDate} ${payEndDate}`];
            }).catch(err => {
                console.log(err);
            });
        },
        submit() {
            this.btnDisabled = true;
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    this.btnDisabled = false;
                    return;
                }
                const {raiseDate, payTime, payDate} = this.form;
                const [raiseStartDate, raiseEndDate] = raiseDate;
                const body = {
                    ...this.form,
                    raiseStartDate,
                    raiseEndDate,
                    raiseDate: '',
                    payTime: '',
                };
                if (payDate && payTime.length > 1) {
                    const [payStartDate, payEndDate] = payTime;
                    body.payStartDate = `${payDate} ${payStartDate}`;
                    body.payEndDate = `${payDate} ${payEndDate}`;
                }
                if (this.id) {
                    body.id = this.id;
                }
                updateProduct(body).then(() => {
                    this.btnDisabled = false;
                    this.$message.success(this.id ? '编辑产品成功' : '添加产品成功');
                    this.$router.back();
                }).catch(err => {
                    this.btnDisabled = false;
                });
            });
        },
        goBack() {
            this.$router.back();
        },
        saveDraft() {
            //
        },
    },
};
</script>

<style scoped lang="less">
.product-edit{
    background: #fff;
    padding-bottom: 20px;
    .demo-form{
        padding-top: 20px;
        margin: 0 26px;
        .el-input-normal{
            width: 350px;
        }
        .line{
            width: 24px;
            height: 1px;
            background: #101010;
            margin: 0 16px;
            display: inline-block;
            vertical-align: middle;
        }
        .form-price{
            .form-price-label{
                margin-right: 10px;
                width: 70px;
                display: inline-block;
                color: #5d5d5d;
            }
            .unit{
                position: relative;
                left: -40px;
                bottom: 1px;
                width: 38px;
                height: 28px;
                line-height: 28px;
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                background: #f5f7fa;
                border-left: 1px solid #dcdfe6;
                color: #909399;
            }
            /deep/ .el-input input{
                padding-right: 46px;
                padding-left: 6px;
            }
        }
        .form-date{
            /deep/ .el-input input{
                padding-left: 38px;
            }
            /deep/ .el-form-item__content{
                display: flex;
                .error-message{
                    margin-left: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 242px;
                    height: 40px;
                    background: #fff;
                    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
                    border-radius: 4px;
                    i{
                        margin-right: 7px;
                        color: #faad14;
                    }
                }
            }
        }
        .performance-grade{
            display: flex;
            flex-wrap: wrap;
            white-space: nowrap;
            .grade-title{
                margin-right: 34px;
            }
            .performance-form{
                display: flex;
                flex-wrap: wrap;
                white-space: nowrap;
            }
            .el-form-item{
                margin-right: 20px;
            }
            /deep/ .el-form-item__label{
                color: #5d5d5d;
            }
            /deep/ .el-form-item__label:before{
                content: '';
            }
            .error-btn{
                color: #f56c6c;
            }
        }
        .agencyFee{
            .agencyFee-item{
                margin-bottom: 10px;
                .agencyFee-label{
                    margin-right: 10px;
                    width: 144px;
                    display: inline-block;
                    color: #5d5d5d;
                }
            }
            .agencyFee-notes{
                display: flex;
            }
        }
    }
    .form-btn{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 26px;
        border-top: 1px solid rgba(187, 187, 187, 0.43);
        /deep/ .el-button{
            margin: 0 13px;
            width: 165px;
            height: 40px;
        }
        /deep/ .el-form-item__content{
            margin-left: 0 !important;
        }
    }
    /deep/ .el-form-item__label{
        text-align: left;
    }
    /deep/ .el-input input{
        height: 30px;
        padding: 0 10px;
    }
}
</style>
